<template>
  <div class="profile-container">
    <header class="profile-header">
      <div class="back-button" @click="goBack">
        <span class="back-arrow">←</span> <!-- 使用箭头符号 -->
      </div>
      <h1>个人信息</h1>
    </header>
    <div class="profile-content">
      <div class="profile-item">
        <label for="nickname">昵称:</label>
        <input type="text" id="nickname" v-model="userInfo.nickname" placeholder="输入昵称" />
      </div>
      <div class="profile-item">
        <label for="sex">性别:</label>
        <select id="sex" v-model="userInfo.sex">
          <option value="男">男</option>
          <option value="女">女</option>
          <option value="其他">其他</option>
        </select>
      </div>
      <div class="profile-item">
        <label for="username">用户名:</label>
        <input type="text" id="username" v-model="userInfo.username" placeholder="输入用户名" />
      </div>
      <div class="profile-item">
	    <label for="avatarImage">头像链接:</label>
	    <input type="text" id="avatarImage" v-model="userInfo.avatarImg" placeholder="输入头像链接" />
	  </div>
	   <div class="profile-item">
		  <label for="password">密码:</label>
		  <input type="password" id="password" v-model="userInfo.password" placeholder="输入新密码" />
		</div>
      <div class="profile-item">
        <label for="qqId">QQ号:</label>
        <input type="text" id="qqId" v-model="userInfo.qqId" placeholder="输入QQ号" />
      </div>
      <button class="save-button" @click="saveProfile">保存</button>
    </div>
  </div>
</template>
<script>
import Cookies from 'js-cookie';
import store from '@/store/store.js';
import config from '@/utils/config.js';
import { mapState } from 'vuex';
export default {
    data() {
        return {
            userInfo: {
                nickname: '',
                sex: '',
                username: '',
                avatarImg: '',
                qqId: '',
            }
        };
    },
    mounted() {
        this.getUserInfo();
    },
    methods: {
        goBack() {
            uni.navigateBack(); // 返回到上一个页面
        },
        saveProfile() {
			uni.showLoading({
				title: '保存中...'
			});
			const token = Cookies.get('token');
			if (!token) {
				uni.hideLoading();
				uni.showToast({
					icon: 'error',
					title: '未获取到有效token，请先登录'
				});
				return;
			}
			uni.request({
				url: `${config.apiBaseUrl}/user/info`,
				method: 'PUT',
				header: {
					'Content-Type': 'application/json',
					'token': token
				},
				data: this.userInfo,
				success: (res) => {
					uni.hideLoading();
					if (res.data.code == 1) {
						console.log('用户信息已保存', this.userInfo);
						uni.showToast({
							icon: 'success',
							title: '个人信息保存成功！'
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg || '保存用户信息失败，请稍后重试'
						});
					}
				},
				fail: (err) => {
					uni.hideLoading();
					uni.showToast({
						icon: 'error',
						title: '保存用户信息失败，请检查网络或稍后重试'
					});
				}
			});
		},
        getUserInfo() {
            uni.showLoading({
                title: '加载中'
            });
            // 从Cookie获取token
            const token = Cookies.get('token');
            if (!token) {
                uni.hideLoading();
                uni.showToast({
                    icon: 'error',
                    title: '未获取到有效token，请先登录'
                });
                return;
            }
            uni.request({
                url: `${config.apiBaseUrl}/user/info`,
                method: 'GET',
                header: {
                    'Content-Type': 'application/json',
                    'token': token
                },
                success: (res) => {
                    uni.hideLoading();
                    if (res.data.code == 1) {
                        // 更新当前页面的userInfo对象
                        this.userInfo.nickname = res.data.data.nickname;
                        this.userInfo.sex = res.data.data.sex;
                        this.userInfo.qqId = res.data.data.qqId;
						this.userInfo.username = res.data.data.username;
						this.userInfo.avatarImg = res.data.data.avatarImg;
                    } else {
                        uni.showToast({
                            icon: 'none',
                            title: res.data.msg || '获取用户信息失败，请稍后重试'
                        });
                    }
                },
                fail: (err) => {
                    uni.hideLoading();
                    uni.showToast({
                        icon: 'error',
                        title: '获取用户信息失败，请检查网络或稍后重试'
                    });
                }
            });
        }
    }
};
</script>

<style>
.profile-container {
  width: 100%;
  max-width: 400px; /* 适当增大宽度，更美观些 */
  margin: 0 auto;
  padding: 20px;
  background-color: #f7f7f7;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  color: #333;
  font-family: Arial, sans-serif;
  box-sizing: border-box;
  border-radius: 8px; /* 增加容器的圆角效果 */
}

.profile-header {
  text-align: center;
  margin-bottom: 20px;
  position: relative; /* 以便绝对定位返回按钮 */
}

.back-button {
  position: absolute; /* 绝对定位将返回按钮放置在左上角 */
  left: 15px; /* 向左移动以靠近左上角 */
  top: 15px; /* 向上移动 */
  cursor: pointer; /* 鼠标光标化为指针 */
  font-size: 28px; /* 适当增大字体大小 */
  transition: color 0.3s ease; /* 增加颜色过渡效果 */
}

.back-button:hover {
  color: #666; /* 鼠标悬停时改变箭头颜色 */
}

.back-arrow {
  color: #333; /* 自定义箭头颜色 */
}

.profile-content {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px; /* 增加内容区域圆角效果 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.profile-item {
  margin-bottom: 20px;
  display: flex;
  align-items: center; /* 让label和输入框垂直居中对齐 */
}

.profile-item label {
  font-weight: bold;
  width: 80px; /* 固定label宽度，更整齐 */
  margin-right: 10px; /* 与输入框间隔一定距离 */
  color: #555; /* 稍微调暗一点颜色 */
}

.profile-item input,
.profile-item select {
  flex: 1; /* 让输入框和选择框占据剩余空间，自适应 */
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s ease; /* 增加边框颜色过渡效果 */
}

.profile-item input:focus,
.profile-item select:focus {
  border-color: #888; /* 输入框获取焦点时边框变色 */
}

.profile-item textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  resize: none;
}

.save-button {
  width: 60%; /* 将按钮宽度调整合适比例 */
  padding: 10px; /* 根据需要调整内边距 */
  border: none;
  border-radius: 4px;
  background-color: #007bff; /* 修改按钮颜色为蓝色，更醒目 */
  color: white; /* 设置字体颜色为白色 */
  font-size: 16px;
  cursor: pointer;
  margin: 20px auto 0; /* 上下增加一点间距并居中按钮 */
  transition: background-color 0.3s ease; /* 增加背景色过渡效果 */
}

.save-button:hover {
  background-color: #0056b3; /* 修改鼠标悬停时的背景颜色 */
}
</style>